<template>
	<view class="flex pd-bottom-5">
		<block v-for="(item,index) in list">
			<view  class="flex-item  pd-bottom-5 pd-top-5"
				:style="{color:active==index?color.primary:activeNoColor}" @click="tab(index,item.url)">
				<view style="height: 30px;">

					<view :class="item.type=='oval'?'oval':''">

						<iconfont v-if="item.type=='oval'" size="30" color="#fff" :icon="item.icon">
						</iconfont>
						<iconfont v-else size="30" :color="active==index?color.primary:activeNoColor" :icon="item.icon">
						</iconfont>

					</view>

				</view>
				<view class="font-size-12">{{item.name}}</view>
			</view>
		</block>
	</view>

</template>

<script>
	export default {
		props: {
			active: {
				type: Number,
				default: 0
			}
		},

		data() {
			var userInfo = uni.getStorageSync('userInfo') || {
				avatarUrl: "",
				nickName: "",
				openId: "",
				parentUser: {
					id: 0,
					avatar: "",
					nickname: "",
					name: ""
				},
				agent: {
					id: 1,
					name: ""
				}
			};
			return {
				userInfo: userInfo,
				list: [{
					index: 0,
					name: this.$t('首页'),
					icon: "icon-SERKOL",
					url: "/pages/index/index"
				}, {
					index: 1,
					name: this.$t('商品'),
					icon: "icon-yunhang",
					url: "/pages/index/mall"
				}, {
					index: 4,
					name: this.$t('购物车'),
					icon: "icon-24gf-cartFull2",
					url: "/pages/index/shop"
				}, {
					index: 3,
					name: this.$t('我的'),
					icon: "icon-yonghu",
					url: "/pages/index/user"
				}],

				activeColor: '#7e9c52',
				activeNoColor: '#ccc'
			}
		},
		created: function() {
			uni.hideTabBar()
			var the = this;
			//userUpdate
			uni.$on('userUpdate', function(data) {
				//	console.log('监听到事件来自 update ，携带参数 msg 为：', data);

				the.userInfo = data;
			})

		},
		methods: {
			tab: function(index, url) {
				this.active = index
				console.log(url)
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>
<style lang="scss">
	.flex {
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #fff;


		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
			0 0 40px rgba(0, 0, 0, 0.1);
	}

	.flex-item {
		flex: 1;
		text-align: center;
	}

	.flex1 {
		display: flex;
	}

	.active {
		color: blue;
	}

	.bg1 {}

	.oval {
		width: 50px;
		height: 50px;
		background: $u-primary;
		margin: 0 auto;
		border-radius: 100%;
		margin-top: -29px;
		line-height: 50px;
		color: #FFFFFF;
	}
</style>
